<template>
	<div class="bg">
		<div class="header1">
			<div class="title">Ⅰ校彩虹第二课堂平台版大数据可视化平台</div>
			<div class="nowTime">
				<div class="Time-hh">{{time}}</div>
				<div class="Time-ss">
					<div>{{day}}</div>
					<div>星期{{ week }}</div>
				</div>
			</div>
		</div>
		<div class="content">
			<div class="content-left">
				<div class="left-top">
					<div class="box-card">
						<div class="body-title">
							<div class="title" :class="{'active':tableIndex==0}" @click="tabclick(0)">学院活跃度</div>
							<div class="title titlea" :class="{'active':tableIndex==1}" @click="tabclick(1)">部门活跃度</div>
						</div>
						<div class="body-card">
							<activity id="chart_pie0" ref="chart_pie0"></activity>
						</div>
					</div>
				</div>
				<div class="left-bottom">
					<div class="box-card">
						<div class="body-title">
							<div class="title">活动参与人数排行</div>
							<div class="bottom-line"></div>
						</div>
						<div class="table-card">
							<el-table :data="ActivityMemberNumRank" style="width: 100%" border :cell-style="cellStyle"
								:header-row-style="{background:'#1696FF',color:'#33BDFC'}">
								<el-table-column type="index" width="60" label="排名"></el-table-column>
								<el-table-column prop="ActivityTitle" label="活动名称" show-overflow-tooltip></el-table-column>
								<el-table-column prop="MemberNum" label="参与人数" width="80" align="center">
								</el-table-column>
							</el-table>
						</div>
					</div>
				</div>
			</div>
			<div class="content-center">
				<div class="leftTop">
					<ul>
						<li v-for="(item,i) in QualifiedStudentNum" :key="i">
							<img :src="require('@/assets/images/icon'+(i+1)+'.png')" />
							<div class="text">{{ item.name }}合格人数</div>
							<div class="num">{{ item.Num }}<span>人/{{ item.Scale }}%</span></div>
							<img v-if="i!=3" src="@/assets/images/line.png" class="img-line">
						</li>
					</ul>
				</div>
				<div class="left-top">
					<div class="box-center">
						<div class="box-card" style="padding-right:0px;">
							<div class="body-title wid">
								<div class="title font">参与人数</div>
								<div class="bottom-line"></div>
							</div>
							<div class="box-body">
								<joinmember  id="chart_pie1" ref="chart_pie1"></joinmember>
							</div>
						</div>
						<div class="box-card">
							<div class="body-title wid">
								<div class="title font">活动数量</div>
								<div class="bottom-line"></div>
							</div>
							<div class="box-body">
								<joinmember  id="chart_pie2" ref="chart_pie2"></joinmember>
								<!-- <img src="@/assets/images/img.png" style="width:100%; height:auto;"> -->
							</div>
						</div>
					</div>
					<div class="box-card">
						<div class="tips">单位：活动数量</div>
						<div class="body-title wid">
							<div class="title font">活动状态</div>
							<div class="bottom-line"></div>
						</div>
						<div class="box-main">
							<ul class="box-num">
								<li class="bga">{{ ActivityNum.Total }}</li>
								<li :class="'bg'+i" v-for="(item,i) in ActivityNum.StateNumData" :key="i">{{ item.Num }}</li>
							</ul>
							<div class="box-line"></div>
							<ul class="box-text">
								<li>活动总数</li>
								<li v-for="(item,i) in ActivityNum.StateNumData" :key="i">{{ item.StateName }}</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="left-bottom leftbg">
					<div class="box-card">
						<div class="body-title">
							<div class="title">学院活动类别排行</div>
							<div class="bottom-line"></div>
						</div>
						<div class="body-card">
							<activityType id="chart_pie3" ref="chart_pie3"></activityType>
							<!-- <img src="@/assets/images/img1.png" style="width:100%; height:300px;"> -->
						</div>
					</div>
				</div>
			</div>
			<div class="content-right">
				<div class="left-top">
					<div class="box-card">
						<div class="body-title">
							<div class="title">学院支部活跃度排行</div>
							<div class="bottom-line"></div>
						</div>
						<div class="table-cardb">
							<el-table :data="DepartClassActivityRank" style="width: 100%" :cell-style="cellStyle1"
								:header-row-style="{background:'#022F8B',color:'#33BDFC'}">
								<el-table-column type="index" label="排名" width="55" align="center"></el-table-column>
								<el-table-column prop="DepartName" label="学院名称" show-overflow-tooltip></el-table-column>
								<el-table-column prop="ClassNum" label="支部数" width="70" align="center">
								</el-table-column>
								<el-table-column prop="ActivityNum" label="活动数" width="70" align="center">
								</el-table-column>
								<el-table-column prop="Avg" label="平均活动数" width="100" align="center">
									<template slot-scope="scope">
										{{ (scope.row.Avg).toFixed(1) }}
									</template>
								</el-table-column>
							</el-table>
						</div>
					</div>
				</div>
				<div class="left-bottom">
					<div class="box-card">
						<div class="body-title">
							<div class="title">学院学生活跃度排行</div>
							<div class="bottom-line"></div>
						</div>
						<div class="body-card">
							<score id="chart_pie4" ref="chart_pie4"></score>
							<!-- <img src="@/assets/images/img2.png" style="width:100%; height:auto;"> -->
						</div>
					</div>
				</div>
				<div class="copy">
					<a href="http://www.acxk.net/"><img src="@/assets/images/jishuzhichi.png"></a>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		DataDisplay
	} from '@/api/follow';
	import Cache from '@/utils/cache';
	import activity from '@/components/echarts/activity.vue'
	import activityType from '@/components/echarts/activityType.vue'
	import joinmember from '@/components/echarts/joinmember.vue'
	import score from '@/components/echarts/score.vue'
	import moment from 'moment'
	export default {
		components:{
			activity,
			joinmember,
			activityType,
			score
		},
		data() {
			return {
				xData: ['安徽同盟', '安徽通用', '上海铁路局', '合肥罗困', '合肥酒厂','安徽同盟', '安徽通用', '上海铁路局', '合肥罗困', '合肥酒厂'],
				yData: [
					{
						value: 250,
						name: '已建面积'
					},
					{
						value: 280,
						name: '在建面积'
					}
				],
				QualifiedStudentNum:[],
				ActivityMemberNumRank:[],
				DepartClassActivityRank:[],
				ActivityNum:{},
				week:'',
				day:'',
				time:'',
				timer:null,
				tableIndex:0
			};
		},
		created() {
			this.week = moment().format('dd')
			this.day = moment().format('YYYY年MM月DD日')
			this.timer = setInterval(this.clock, 1000);
			this.getDepartActivityStateRank1()
			// this.getDepartActivityStateRank2()
			this.getQualifiedStudentNum()
			this.getList()
			this.getActivityMemberNumRank()
			this.getDepartClassActivityRank()
			this.getActivityNum()
			this.getDepartActivityTypeRank()
			this.getDepartAvgScoreRank()
		},
		mounted() {
			// this.$refs['chart_pie0'].initChart('统计', this.yData,this.xData);
			// this.$refs['chart_pie1'].initChart('统计', this.yData,this.xData);
			// this.$refs['chart_pie2'].initChart('统计', this.yData,this.xData);
			// this.$refs['chart_pie3'].initChart('统计', this.yData,this.xData);
			// this.$refs['chart_pie4'].initChart('统计', this.yData,this.xData);
		},
		beforeDestroy(){
			clearInterval(this.timer)
		},
		methods: {
			moment,
			clock(){
				this.time = moment().format('HH:mm:ss')
			},
			cellStyle({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				return "height:41px";
			},
			cellStyle1({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				return "height:40px";
			},
			tabclick(num){
				this.tableIndex = num
				if(num==0){
					this.getDepartActivityStateRank1()
				}else{
					this.getDepartActivityStateRank2()
				}
			},
			async getList(){
				let res = await DataDisplay('DoGetActivityMemberNumByType',{})
				let arr = res.data.data.Data
				let arr1 = []
				arr.map((value, index, arry) => {
					arr1.push({
						value: Number(value.MemberNum),
						name: value.ActivityTypeName.substr(0,4),
						data:value.ChildData
					});
				});
				this.$refs['chart_pie1'].initChart('统计', arr1);
				let res1 = await DataDisplay('DoGetActivityNumByType',{})
				let list = res1.data.data.Data
				let list1 = []
				list.map((value, index, arry) => {
					list1.push({
						value: value.ActivityNum,
						name: value.ActivityTypeName.substr(0,4),
						data:value.ChildData
					});
				});
				this.$refs['chart_pie2'].initChart('统计', list1);
			},
			async getQualifiedStudentNum(){
				let res = await DataDisplay('DoGetQualifiedStudentNum',{})
				this.QualifiedStudentNum = res.data.data
			},
			async getActivityMemberNumRank(){
				let res = await DataDisplay('DoGetActivityMemberNumRank',{})
				this.ActivityMemberNumRank = res.data.data
			},
			async getDepartClassActivityRank(){
				let res = await DataDisplay('DoGetDepartClassActivityRank',{})
				this.DepartClassActivityRank = res.data.data
			},
			async getActivityNum(){
				let res = await DataDisplay('DoGetActivityNum',{})
				this.ActivityNum = res.data.data
			},
			async getDepartActivityTypeRank(){
				let res = await DataDisplay('DoGetDepartActivityTypeRank',{})
				let arr = res.data.data
				let xData = [],yData=[]
				let data1 = []
				let data2 = []
				let data3 = []
				let data4 = []
				let data5 = []
				let data6 = []
				let data7 = []
				let data8 = []
				// for(let i=0;i<arr.length;i++){
				// 	xData.push(arr[i].DepartName.substr(0,4))
				// 	for(let j = 0;j<arr[i].TypeNumData.length;j++){
				// 		if(j==0){
				// 			data1.push(arr[i].TypeNumData[0].Num)
				// 		}
				// 		if(j==1){
				// 			data2.push(arr[i].TypeNumData[1].Num)
				// 		}
				// 		if(j==2){
				// 			data3.push(arr[i].TypeNumData[2].Num)
				// 		}
				// 		if(j==3){
				// 			data4.push(arr[i].TypeNumData[3].Num)
				// 		}
				// 	}
				// }
				// yData=[
				// 	{
				// 		name:'明德志远',
				// 		type:'bar',
				// 		stack: 'total',
				// 		data:data1
				// 	},
				// 	{
				// 		name:'智圆行方',
				// 		type:'bar',
				// 		stack: 'total',
				// 		data:data2
				// 	},
				// 	{
				// 		name:'艺美体健',
				// 		type:'bar',
				// 		stack: 'total',
				// 		data:data3
				// 	},
				// 	{
				// 		name:'让逸竞劳',
				// 		type:'bar',
				// 		stack: 'total',
				// 		data:data4,
				// 		itemStyle: {
				// 			normal: {
				// 				barBorderRadius: [5, 5, 0, 0]
				// 			}
				// 		}
				// 	}
				// ]
				for(let i=0;i<arr.length;i++){
					xData.push(arr[i].DepartName)
					for(let j = 0;j<arr[i].TypeNumData.length;j++){
						if(j==0){
							data1.push(arr[i].TypeNumData[0].Num)
						}
						if(j==1){
							data2.push(arr[i].TypeNumData[1].Num)
						}
						if(j==2){
							data3.push(arr[i].TypeNumData[2].Num)
						}
						if(j==3){
							data4.push(arr[i].TypeNumData[3].Num)
						}
						if(j==4){
							data5.push(arr[i].TypeNumData[4].Num)
						}
						if(j==5){
							data6.push(arr[i].TypeNumData[5].Num)
						}
						if(j==6){
							data7.push(arr[i].TypeNumData[6].Num)
						}
						if(j==7){
							data8.push(arr[i].TypeNumData[7].Num)
						}
						
					
					}
					// yData.push(
					// 	{
					// 		name:arr[0].TypeNumData[j].ActivityTypeName,
					// 		type:'bar',
					// 		stack: 'total',
					// 		data:j==0?data1:j==1?data2:j==2?data3:j==3?data4:j==4?data5:j==5?data6:j==6?data7:j==7?data8:data8
					// 	}
					// )
				}
				console.log(yData);
				if(arr[0].TypeNumData.length>0){
					for(let j=0;j<arr[0].TypeNumData.length;j++){
						yData.push(
							{
								name:arr[0].TypeNumData[j].ActivityTypeName,
								type:'bar',
								stack: 'total',
								data:j==0?data1:j==1?data2:j==2?data3:j==3?data4:j==4?data5:j==5?data6:j==6?data7:j==7?data8:data8
							}
						)
					}
				}
				// yData=[
				// 	{
				// 		name:arr[0].TypeNumData[0].ActivityTypeName||'',
				// 		type:'bar',
				// 		stack: 'total',
				// 		data:data1
				// 	},
				// 	{
				// 		name:arr[0].TypeNumData[1].ActivityTypeName||'',
				// 		type:'bar',
				// 		stack: 'total',
				// 		data:data2
				// 	},
				// 	{
				// 		name:arr[0].TypeNumData[2].ActivityTypeName||'',
				// 		type:'bar',
				// 		stack: 'total',
				// 		data:data3
				// 	},
				// 	{
				// 		name:arr[0].TypeNumData[3].ActivityTypeName||'',
				// 		type:'bar',
				// 		stack: 'total',
				// 		data:data4,
				// 		itemStyle: {
				// 			normal: {
				// 				barBorderRadius: [5, 5, 0, 0]
				// 			}
				// 		}
				// 	},
				// 	{
				// 		name:arr[0].TypeNumData[4].ActivityTypeName||'',
				// 		type:'bar',
				// 		stack: 'total',
				// 		data:data5
				// 	},
				// 	{
				// 		name:arr[0].TypeNumData[5].ActivityTypeName||'',
				// 		type:'bar',
				// 		stack: 'total',
				// 		data:data6
				// 	},
				// 	{
				// 		name:arr[0].TypeNumData[6].ActivityTypeName||'',
				// 		type:'bar',
				// 		stack: 'total',
				// 		data:data7
				// 	},
				// 	{
				// 		name:arr[0].TypeNumData[7].ActivityTypeName||'',
				// 		type:'bar',
				// 		stack: 'total',
				// 		data:data8,
				// 		itemStyle: {
				// 			normal: {
				// 				barBorderRadius: [5, 5, 0, 0]
				// 			}
				// 		}
				// 	}
				// ]
				this.$refs['chart_pie3'].initChart('统计',yData,xData);
			},
			async getDepartActivityStateRank1(){
				let res = await DataDisplay('DoGetDepartActivityStateRank',{departType:1})
				let arr = res.data.data
				let xData = [],yData=[]
				let data1 = []
				let data2 = []
				let data3 = []
				let data4 = []
				for(let i=0;i<arr.length;i++){
					xData.push(arr[i].DepartName)
					for(let j = 0;j<arr[i].StateNumData.length;j++){
						if(j==0){
							data1.push(arr[i].StateNumData[0].Num)
						}
						if(j==1){
							data2.push(arr[i].StateNumData[1].Num)
						}
						if(j==2){
							data3.push(arr[i].StateNumData[2].Num)
						}
						if(j==3){
							data4.push(arr[i].StateNumData[3].Num)
						}
					}
				}
				yData=[
					{
						name:'积分待确认',
						type:'bar',
						stack: 'total',
						data:data1.reverse()
					},
					{
						name:'审核中',
						type:'bar',
						stack: 'total',
						data:data2.reverse()
					},
					{
						name:'审核通过',
						type:'bar',
						stack: 'total',
						data:data3.reverse()
					},
					{
						name:'审批驳回',
						type:'bar',
						stack: 'total',
						data:data4.reverse(),
						itemStyle: {
							normal: {
								barBorderRadius: [0, 5, 5, 0]
							}
						}
					}
				]
				this.$refs['chart_pie0'].initChart('统计',yData,xData.reverse());
			},
			async getDepartActivityStateRank2(){
				let res = await DataDisplay('DoGetDepartActivityStateRank',{departType:2})
				console.log(res.data.data)
				let arr = res.data.data
				let xData = [],yData=[]
				let data1 = []
				let data2 = []
				let data3 = []
				let data4 = []
				for(let i=0;i<arr.length;i++){
					xData.push(arr[i].DepartName)
					for(let j = 0;j<arr[i].StateNumData.length;j++){
						if(j==0){
							data1.push(arr[i].StateNumData[0].Num)
						}
						if(j==1){
							data2.push(arr[i].StateNumData[1].Num)
						}
						if(j==2){
							data3.push(arr[i].StateNumData[2].Num)
						}
						if(j==3){
							data4.push(arr[i].StateNumData[3].Num)
						}
					}
				}
				yData=[
					{
						name:'审核中',
						type:'bar',
						stack: 'total',
						data:data1.reverse()
					},
					{
						name:'审核通过',
						type:'bar',
						stack: 'total',
						data:data2.reverse()
					},
					{
						name:'积分待发放',
						type:'bar',
						stack: 'total',
						data:data3.reverse()
					},
					{
						name:'已完结',
						type:'bar',
						stack: 'total',
						data:data4.reverse(),
						itemStyle: {
							normal: {
								barBorderRadius: [0, 5, 5, 0]
							}
						}
					}
				]
				console.log(yData)
				console.log(xData)
				this.$refs['chart_pie0'].initChart('统计',yData,xData.reverse());
			},
			async getDepartAvgScoreRank(){
				let res = await DataDisplay('DoGetDepartAvgScoreRank',{})
				console.log(res.data.data)
				let arr = res.data.data
				let xData = [],yData=[]
				for(let i=0;i<arr.length;i++){
					xData.push(arr[i].DepartName)
					if((arr[i].AvgScore)!=null){
						yData.push((arr[i].AvgScore).toFixed(2))
					}else{
						yData.push(0)
					}
					
				}
				this.$refs['chart_pie4'].initChart('统计', yData,xData);
			}

		}
	};
</script>

<style lang="less" scoped>
	.bg {
		position: fixed;
		top: 0px;
		left: 0px;
		background: url(../../assets/images/bg.png) no-repeat center;
		width: 100%;
		height: 100%;
		background-size: cover;
		overflow: scroll;
	}

	.header1 {
		background: url(../../assets/images/header.png) no-repeat center;
		width: 100%;
		height: auto;
		background-size: cover;
		position: relative;

		.title {
			text-align: center;
			height: 75px;
			font-size: 40px;
			font-family: "微软雅黑";
			font-weight: bold;
			color: #39D6FE;
		}

		.nowTime {
			position: absolute;
			right: 35px;
			top: 4px;
			display: flex;

			.Time-hh {
				font-size: 20px;
				color: #39D6FE;
				font-weight: bold;
			}

			.Time-ss {
				font-size: 12px;
				font-weight: normal;
				margin-left: 20px;
				color: #39D6FE;
			}

		}
	}

	.content {
		display: flex;
		padding: 20px 20px;
		box-sizing: border-box;
		height:1000px;

		.content-left {
			width: 31%;

			.left-top {
				height: 440px;
				background: url(../../assets/images/bg-blue.png) no-repeat center;
				//margin-top: 25px;
				background-size: 100% 100%;
			}

			.left-bottom {
				height: 542px;
				background: url(../../assets/images/bg-a.png) no-repeat center;
				background-size: 100% 100%;
				margin-top: 10px;
			}
		}

		.content-center {
			width: 38%;
			margin-left: 20px;

			.left-top {
				height: 460px;
				background: url(../../assets/images/bg-white.png) no-repeat center;
				background-size: 100% 100%;
				margin-top: 25px;
			}

			.left-bottom {
				height: 375px;
				background: url(../../assets/images/bg-a.png) no-repeat center;
				background-size: 100% 100%;
				margin-top: 15px;
			}

			.leftTop {
				margin-top: 10px;

				ul {
					display: flex;
					margin: 0px;
					padding: 0px;
					height:111px;

					li {
						flex: 1;
						text-align: center;
						list-style: none;
						position: relative;

						.img-line {
							position: absolute;
							top: 0px;
							right: 0px;
						}

						.text {
							font-size: 12px;
							color: #D5E4F9;
							padding-top: 18px;
						}

						.num {
							font-size: 18px;
							padding-top: 2px;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							font-weight: 400;
							color: #48ECE7;

							span {
								font-weight: normal;
								padding-left: 5px;
								display: inline-block;
								color: #DCDCDC;
								font-size: 12px;
							}
						}

						.colora {
							color: #FEE287
						}

						.colorb {
							color: #79B8FE
						}

						.colorc {
							color: #48ECBF
						}
					}
				}
			}

			.box-num {
				display: flex;
				width: 100%;
				margin: 0px;
				padding: 0px;
				margin-top: 20px;

				li {
					list-style: none;
					flex: 1;
					background: #52A8F3;
					color: #fff;
					font-size: 12px;
					height: 30px;
					line-height: 30px;
					text-align: center;
				}

				.bg0 {
					background-color: #5D52F3;
				}

				.bg1 {
					background-color: #52C7F3;
				}

				.bg2 {
					background-color: #DFBE17;
				}

				.bg3 {
					background-color: #33FCC5;
				}
			}

			.box-line {
				width: 100%;
				height: 3px;
				background: linear-gradient(180deg, #FFFFFF 0%, #90CBFD 22%, #85C6FD 48%, #0A8BFB 96%, #0086FB 100%);
			}
		}

		.box-text {
			display: flex;
			margin: 0px;
			padding: 0px;

			li {
				list-style: none;
				flex: 1;
				color: #fff;
				font-size: 12px;
				height: 40px;
				line-height: 40px;
				text-align: center;
			}
		}

		.content-right {
			width: 31%;
			margin-left: 20px;

			.left-top {
				height: 550px;
				background: url(../../assets/images/bg-blue.png) no-repeat center;
				background-size: 100% 100%;
				// margin-top: 25px;
				// padding:0 0 25px;
				width: 100%;
			}

			.left-bottom {
				height: 406px;
				background: url(../../assets/images/bg-d.png) no-repeat center;
				background-size: 100% 100%;
				margin-top: 10px;
			}
		}

		.box-center {
			display: flex;

			.box-card {
				flex: 1;
			}

		}

		.box-card {
			padding-left: 15px;
			padding-right: 25px;
			position: relative;

			.tips {
				position: absolute;
				top: 42px;
				right: 25px;
				font-size: 12px;
				color: rgba(255, 255, 255, 0.54);
			}

			.body-title {
				display: flex;
				border-bottom: 1px solid rgba(134, 223, 251, 0.26);
				height: 53px;
				width: 100%;
				position: relative;

				.title {
					height: 54px;
					line-height: 54px;
					font-weight: bold;
					color: #B7CFFC;
					font-size: 18px;
					font-weight: bold;
				}

				.font {
					font-weight: normal !important;
					color: #B7CFFC;
				}

				.active {
					border-bottom: 3px solid #2AB4FB;
					color: #39D6FE;
				}

				.bottom-line {
					height: 3px;
					background-color: #2AB4FB;
					width: 50px;
					position: absolute;
					bottom: -2px;
					left: 0px;
				}

				.titlea {
					margin-left: 20px;
				}
			}

			.wid {
				width: 120px;
			}

			.body-card {
				margin-top: 10px;
			}

			.table-card {

				margin-top: 5px;

				/deep/.el-table {

					th,
					td {
						background-color: #011145;
						color: #fff;
						font-size: 12px;
						padding: 7px 0;
						border: 1px solid rgba(134, 223, 251, 0.3);
					}

					th {
						color: #2AB4FB
					}

				}

			}

			.table-cardb {
				margin-top: 5px;

				/deep/.el-table {
					border: 0;

					th,
					td {
						border: 0;
						background-color: #011145;
						color: #fff;
						padding: 9px 0;
						font-size: 12px;
					}

					th {
						color: #2AB4FB
					}

				}
			}
		}

		.copy {
			margin-top: 10px;

			img {
				width: 100%;
				height: auot;
				display: block;
			}
		}

	}
	.el-table, .el-table__expanded-cell{
		background:none;
		/deep/.el-table__empty-text{
			background:none!important;
		}
		&::before{
			background-color: rgba(134, 223, 251, 0.26);
		}
		&::after{
			background-color: rgba(134, 223, 251, 0.26);
		}
	}
	/deep/.el-table--border{
		border: 1px solid rgba(134, 223, 251, 0.26)!important;
	}
</style>
